<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/21
  Time: 22:54
  To change this template use File | Settings | File Templates.
  jq控制html的内容
--%>

<%--jq的选择器--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
<%--    <style type="text/css">
        div{width: 300px; height: 300px;background: pink;}
    </style>--%>
    <script type="text/javascript">
        $(function (e) {
            $('#b').click(function () {
                //$('#box').css('background','pink');
                //$('.myclass').css('background','pink');//类选择器
                //$('h1,.myclass,h3').css('background','pink');//多条件选择器
                //$('.ul01 li').css('background','pink');//选中ul01中的所有li标签，后代选择器
                //$('.da>div').css('background','pink');//表示子代选择器，只能选择第一级的后代
                //$('.myclass02+li').css('background','pink');//表示同级下一个标签
                $('.myclass02~li').css('background','pink');//表示同级之后所有元素
            });
        });
    </script>
</head>
<body>
    <button id="b">按钮</button>
    <br>
    <p class="myclass">这是一个段落</p>
    <p>这是一个段落</p>
    <div class="myclass">这是一个盒子</div>
    <h1>diyige</h1>
    <h2>dierge</h2>
    <h3>disange</h3>
    <ul class="ul01">
        <li class="myclass01">第一级li
            <ul>
                <li>第二级li</li>
                <li>第二级li</li>
                <li>第二级li</li>
                <li class="myclass02">第二级22222</li>
                <li class="myclass03">第二级33333</li>
            </ul>
        </li>
    </ul>
    <div class="da">老爷子
        <div class="zhong">大儿子
            <div class="xiao">大孙子</div>
        </div><br/><br/>
        <div class="zhong">二儿子
            <div class="xiao">二孙子</div>
        </div><br/><br/>
        <div class="zhong">三儿子
            <div class="xiao">三孙子</div>
        </div><br/><br/>
    </div>
</body>
</html>
